<!-- <template>
   <h3>学习主页</h3>

  </template>

<script lang="ts">
</script> -->

<!-- <template>
   <h3>readonly与shallowReadonly</h3>
<h3>state:{{state2}}</h3>
<hr>
<button @click=update>更新数据</button>
  </template>

<script lang="ts">
    import {
        defineComponent,
        reactive,
        readonly,
        shallowReadonly
    } from 'vue'
    export default defineComponent({
        name: 'App',
        setup() {
            const state = reactive({
                    name: '鸣人',
                    age: 21,
                    car: {
                        name: '奔驰',
                        color: 'yellow'
                    }
                })
                //readonly只读的数据 --深度的只读
                // const state2 =readonly (state)
                // const update = () => {
                //     state2.caar.name += '=='
                // }
                //shallowreadonly也是只读 的数据不能更改 它是浅只读 数据内部的里面的可以更改
            const state2 = shallowReadonly(state)
            const update = () => {
                state2.car.name += '=='
            }
            return {
                state2,
                update
            }
        }
    })
</script> -->

<template>
   <h3>toRaw与markRaw</h3>
<h3>state:{{state}}</h3>
<hr>
<button @click=update>测试toRaw</button>
<button @click=update2>测试markRaw</button>
  </template>

<script lang="ts">
    import {
        defineComponent,
        markRaw,
        reactive,
        toRaw,
        // markRaw
    } from 'vue'
    interface UserInfo {
        name: string;
        age: number;
        likes ? : string[]
    }
    export default defineComponent({
        name: 'App',
        setup() {
            const state = reactive < UserInfo > ({
                name: '小明',
                age: 20,
            })
            const update = () => {
                //把dialing对象变成了普通对象  ，数据变化 但界面没有变化因为不是响应式数据了
                const user = toRaw(state)
                user.name += '=='
                console.log('学习学习');

            }
            const update2 = () => {
                const likes = ['吃', '喝']
                state.likes = markRaw(likes)
                //markRaw标记的对象数据 从此以后都不能再成为代理对象了
                setInterval(() => {
                       if(state.likes){
                            state.likes[0] += '='
                        console.log('定时器走起起来')
                       }
                    },
                    1000)
            }
            return {
                state,
                update,
                update2,

            }
        }
    })
</script>